<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width=650
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">

    <a-form>
      <a-form-item label='选择快捷菜单(选择目录无效)'>
        <a-tree
          checkable
          @check="onCheck"
          :checkedKeys="checkedKeys"
          :treeData="treeData"
          @expand="onExpand"
          :selectedKeys="selectedKeys"
          :expandedKeys="expandedKeysss"
          :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>


  </a-drawer>

</template>
<script>
  import {queryTreeListByUser, queryUserQuickMenu, saveQuickMenu} from '@/api/api'


  export default {
    name: "FastModal",
    components: {},
    data() {
      return {
        userId: "",
        treeData: [],
        defaultCheckedKeys: [],
        checkedKeys: [],
        expandedKeysss: [],
        allTreeKeys: [],
        autoExpandParent: true,
        checkStrictly: true,
        title: "快捷菜单配置",
        visible: false,
        loading: false,
        selectedKeys: []
      }
    },
    computed: {},
    methods: {

      onCheck(o) {
        if (this.checkStrictly) {
          this.checkedKeys = o.checked;
        } else {
          this.checkedKeys = o
        }
      },
      show(userId) {
        this.userId = userId
        this.visible = true;
      },
      close() {
        this.reset()
        this.$emit('close');
        this.visible = false;
      },
      onExpand(expandedKeys) {
        this.expandedKeysss = expandedKeys;
        this.autoExpandParent = false
      },
      reset() {
        this.expandedKeysss = []
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.loading = false
      },
      expandAll() {
        this.expandedKeysss = this.allTreeKeys
      },
      closeAll() {
        this.expandedKeysss = []
      },
      checkALL() {
        this.checkedKeys = this.allTreeKeys
      },
      cancelCheckALL() {
        //this.checkedKeys = this.defaultCheckedKeys
        this.checkedKeys = []
      },
      switchCheckStrictly(v) {
        if (v == 1) {
          this.checkStrictly = false
        } else if (v == 2) {
          this.checkStrictly = true
        }
      },
      handleCancel() {
        this.close()
      },
      handleSubmit() {
        let that = this;
        let params = {
          userId: that.userId,
          permissionIds: that.checkedKeys.join(","),
          lastpermissionIds: that.defaultCheckedKeys.join(","),
        };
        that.loading = true;
        console.log("请求参数：", params);
        saveQuickMenu(params).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loading = false;
            that.reset()
            that.$emit('ok');
            that.visible = false;
          } else {
            that.$message.error(res.message);
            that.loading = false;
            that.close();
          }
        })
      },
      loadData(){
        queryTreeListByUser().then((res) => {
          this.treeData = res.result.treeList
          //一级菜单
          for (let i = 0; i < this.treeData.length; i++) {
            if (this.treeData[i].children && this.treeData[i].children.length > 0) {
              this.treeData[i].disabled = true;
              //二级菜单
              for (let j = 0; j < this.treeData[i].children.length; j++) {
                if (this.treeData[i].children[j].children && this.treeData[i].children[j].children.length > 0) {
                  this.treeData[i].children[j].disabled = true;
                  //三级菜单
                  for (let k = 0; k < this.treeData[i].children[j].children.length; k++) {
                    if (this.treeData[i].children[j].children[k].children && this.treeData[i].children[j].children[k].children.length > 0) {
                      this.treeData[i].children[j].children[k].disabled = true;
                      //四级菜单
                      for (let l = 0; l < this.treeData[i].children[j].children[k].children.length; l++) {
                        if (this.treeData[i].children[j].children[k].children[l].children && this.treeData[i].children[j].children[k].children[l].children.length > 0) {
                          this.treeData[i].children[j].children[k].children[l].disabled = true;
                        }else{
                          this.treeData[i].children[j].children[k].children[l].isLeaf = true;
                        }
                      }
                    } else {
                      this.treeData[i].children[j].children[k].isLeaf = true;
                    }
                  }
                } else {
                  this.treeData[i].children[j].isLeaf = true;
                }
              }
            } else {
              this.treeData[i].isLeaf = true;
            }
          }
          console.log("this.treeData",this.treeData);
          this.allTreeKeys = res.result.ids
          queryUserQuickMenu().then((res) => {
            console.log(res.result);
            this.checkedKeys = [...res.result];
            this.defaultCheckedKeys = [...res.result];
            this.expandedKeysss = this.allTreeKeys;
            //console.log(this.defaultCheckedKeys)
          })
        })
      }
    },
    watch: {
      visible() {
        if (this.visible) {
          this.loadData();
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>